<template>
  <div class="cate-page">
    <div class="cate-container">
      <div
        v-for="(cate, index) in cates"
        :key="cate.id"
        @click="switchActiveCate(index)"
        :class="[
          'cate',
          {
            active: index === activeIndex,
          },
        ]"
      >
        {{ cate.name }}
      </div>
    </div>
    <div class="item-container">
      <div class="items">
        <div
          class="item"
          @click="enterDetail(item.id)"
          v-for="item in items"
          :key="item.id"
        >
          <img :src="item.pic" alt="" class="item-img" />
          <div class="item-info">
            <h3>{{ item.name }}</h3>
            <div class="item-action">
              <p class="price">￥{{ item.minPrice }}</p>
              <van-icon
                name="gouwuchetianjia"
                color="#f66"
                :size="20"
                class-prefix="icon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Tabbar />
</template>

<script setup lang="ts" name="Cate">
import Tabbar from "@/components/Tabbar.vue";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import api from "@/api";
const router = useRouter();

const cates = ref<Cate[]>([]);
const items = ref<Item[]>([]);

// 切换高亮分类
const switchActiveCate = (index: number) => {
  activeIndex.value = index;
  fetchItems();
};

// 高亮分类的下标
const activeIndex = ref(0);
// 请求所有分类
const fetchCates = () => {
  api.fetchCates().then((res) => {
    if (res.data.code === 0) {
      cates.value = res.data.data;
      fetchItems();
    }
  });
};

// 获取高亮分类下的商品
const fetchItems = () => {
  api
    .fetchItems({
      categoryId: cates.value[activeIndex.value].id,
    })
    .then((res) => {
      if (res.data.code === 0) {
        items.value = res.data.data.result;
      }
      if (res.data.code === 700) {
        items.value = [];
      }
    });
};

// 跳转到商品详情
const enterDetail = (id: number) => {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
};
onMounted(() => {
  fetchCates();
});
</script>

<style scoped lang="scss">
.cate-page {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 50px;
  display: flex;
  background-color: #f1f1f1;
  .cate-container {
    width: 3rem;
    height: 100%;
    overflow-y: auto;
    background-color: #fff;
    .cate {
      font-size: 14px;
      line-height: 30px;
      color: #333;
      text-align: center;
      position: relative;
      &.active {
        color: #ff5930;
        &::after {
          content: "";
          display: block;
          position: absolute;
          width: 2px;
          height: 30px;
          background-color: #ff5930;
          left: 0;
          top: 0;
        }
      }
    }
  }
  .item-container {
    width: 7rem;
    height: 100%;
    overflow-y: auto;
    .item {
      display: flex;
      &-img {
        width: 3rem;
      }
      &-info {
        padding: 0 10px;
        flex: 1;
        .item-action {
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>
